<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" value="IE=9">
<link rel="stylesheet" href="../../demo/default.css" />
<link rel="stylesheet" href="../../dist/css/style.css" />
<!-- Run 'make' to build the file -->
<script src="../../dist/CommentCoreLibrary.js"></script>
<style>
pre{margin:0;}
pre.error{color:#f00;}
pre.warning{color:#FFC500;}
.s-button, .abp .button{
	display:block; border:1px solid #f88; padding:8px 6px 8px 6px; 
	background:#000; color:#f88; float:left;
	-moz-user-select: none;
	-khtml-user-select: none; 
	-webkit-user-select: none; 
	-o-user-select: none; 
	user-select: none; 
	cursor:default;
}
.s-button:hover,.abp .button:hover{background:#f88; color:#000;}
</style>
<!-- Scripting Extensions -->
<script src="../../dist/scripting/Host.js"></script>

<title>Testrun Sandbox For CCL /w Scripting Enabled</title>
</head>
<body>
<div style="position:absolute;right:0; top:0; width: 45%; overflow:auto; height:384px; padding:3px;" id="debug-console"></div>
<div id="player-unit" style="width:540px;clear:both;">
	<div class="m20 abp" id="player" style="height:384px;">
		<div id="commentCanvas" class="container"></div>
		<video id="abpVideo" autobuffer="true" data-setup="{}" width="100%" height="100%" style="z-index:-1;width:100%;height:100%;top:0;left:0;right:0;bottom:0;" preload="auto">
		</video>
	</div>
	<div class="controls">
		<a class="button" onclick="stop();" href="javascript:;">Stop</a>
		<a class="button" onclick="resume();" href="javascript:;">Resume</a>
		<a class="button" onclick="cmresize();" href="javascript:;">Resize</a>
		<div style="clear:both;"></div>
	</div>
	<div style="clear:both;"></div>
</div>
<div style="margin-top:550px;">
	<h2>Tests</h2>
	<div class="controls">
		<a class="button" onclick="load('../../test/scripting/kanpai.xml');" href="javascript:;">Run Scripting 1 (Pure) [Kanpai]</a>
		<a class="button" onclick="load('../../test/scripting/tsubasa.xml');" href="javascript:;">Run Scripting 2 (Mixed) [Tusbasa]</a>
		<a class="button" onclick="load('../../test/scripting/comment-festival-v3.xml');" href="javascript:;">Run Scripting 3 (Large) [Comment Festival v3]</a>
		<a class="button" onclick="load('../../test/scripting/jinzou-enemy.xml');" href="javascript:;">Run Scripting 4 (drawPath) [Jinzou Enemy]</a>
		<a class="button" onclick="load('../../test/scripting/crazy-night.xml');" href="javascript:;">Run Scripting 5 (textures &amp; 3d) [Crazy Night]</a>
		<a class="button" onclick="load('../../test/scripting/av2775802.xml');" href="javascript:;">Run Scripting 6 (Complex) [World's End Dance Hall]</a>
		<a class="button" onclick="load('../../test/scripting/round-and-round.xml');" href="javascript:;">Run Scripting 7 (Akari engine) [Round and Round]</a>
		<a class="button" onclick="load('../../test/scripting/av2739681.xml');" href="javascript:;">Run Scripting 8 (Akari engine) [Vidro Moyou]</a>
		<div style="clear:both;"></div>
	</div>
</div>	
<p>Scripting: <a href="../../demo/">&larr; Back to main test</a> </p>
<script>
var isWindowedFullscreen = false;
function launchFullScreen(element) {
	cm.setBounds();
	if(element.requestFullscreen) {
		element.requestFullscreen();
	} else if(element.mozRequestFullscreen) {
		element.mozRequestFullscreen();
	} else if(element.webkitRequestFullscreen) {
		element.webkitRequestFullscreen();
	}
}

function launchWindowFull(element){
	if(!isWindowedFullscreen){
		element.style.position = "fixed";
		element.style.top = "0";
		element.style.bottom = "0";
		element.style.left = "0";
		element.style.right = "0";
		element.style.width = "auto";
		element.style.height = "auto";
	}else{
		element.style.position = "";
		element.style.top = "";
		element.style.bottom = "";
		element.style.left = "";
		element.style.right = "";
	}
	cm.getBounds();
	isWindowedFullscreen = !isWindowedFullscreen;
}
var $ = function (e) { return document.getElementById(e); }
var cm = new CommentManager($('commentCanvas'));
var bscripter = new CCLScripting("../../dist/scripting/Worker.js");

bscripter.logger = new function(){
	this.log = function(t){
		var pre = document.createElement("pre");
		pre.textContent = "[" + (window.playhead / 1000) + "] " + t.toString();
		$("debug-console").appendChild(pre);
		while($("debug-console").children.length > 200){
			$("debug-console").removeChild($("debug-console").children[0]);
		}
		$("debug-console").scrollTop = 100000;
	};
	this.error = function(t){
		var pre = document.createElement("pre");
		pre.textContent = "[" + (window.playhead / 1000) + "] " + t.toString();
		pre.className = "error";
		$("debug-console").appendChild(pre);
		while($("debug-console").children.length > 200){
			$("debug-console").removeChild($("debug-console").children[0]);
		}
		$("debug-console").scrollTop = 100000;
	};
	this.warn = function(t){
		var pre = document.createElement("pre");
		pre.textContent = "[" + (window.playhead / 1000) + "] " + t.toString();
		pre.className = "warning";
		$("debug-console").appendChild(pre);
		while($("debug-console").children.length > 200){
			$("debug-console").removeChild($("debug-console").children[0]);
		}
		$("debug-console").scrollTop = 100000;
	};
};

var tmr=0;
var start=0;
var playhead = 0, lasthead = 0;

cm.scripting = bscripter.getSandbox($("commentCanvas"), {
    'play': function () {
        bscripter.logger.log('Player.play invoked. Ignoring.');
        //resume();
    },
    'pause': function () { 
        bscripter.logger.log('Player.pause invoked. Ignoring.');
        //stop();
    },
    'seek': function (time) { 
        bscripter.logger.log('Seeking to [' + time + ']. Ignoring.');
        //playhead = time; 
        //lasthead = time; 
        //start = Date.now() - playhead; 
    },
    'jump': function (config) { 
        bscripter.logger.warn('Called jump with videoid[' + config.vid + ']. Ignoring request.');
    }
});
cm.init();

function timeupdate(){
	playhead = Date.now() - start;
	cm.time(playhead);
	cm.scripting.send("Update:TimeUpdate", {
		"state": "playing",
		"time": playhead
	});
}

function load(dmf,dmfmd){
	if (cm._commentProvider && cm._commentProvider instanceof CommentProvider) {
		// Unload the previous comment provider if possible
		cm._commentProvider.destroy();
	}
    cm._commentProvider = new CommentProvider();
    cm._commentProvider.addTarget(cm);
	cm.clear();
	// Hook Providers
	switch (dmfmd) {
		case 'acfun': {
			cm._commentProvider.addStaticSource(
				CommentProvider.XMLProvider('GET', dmf), 
				CommentProvider.SOURCE_JSON).addParser(new AcfunFormat.JSONParser(), CommentProvider.SOURCE_JSON);
			break;
		}
		case 'cdf': {
			cm._commentProvider.addStaticSource(
				CommentProvider.XMLProvider('GET', dmf), 
				CommentProvider.SOURCE_JSON).addParser(new CommonDanmakuFormat.JSONParser(), CommentProvider.SOURCE_JSON)
			break;
		}
		case 'bilibili': 
		default: {
			cm._commentProvider.addStaticSource(
				CommentProvider.XMLProvider('GET', dmf), 
				CommentProvider.SOURCE_XML).addParser(new BilibiliFormat.XMLParser(), CommentProvider.SOURCE_XML)
			break;
		}
	}
	start = 0;
	try {
		clearTimeout(tmr);
	} catch (e) {}
	cm._commentProvider.start().then(function () {
		cm.start();
		start = new Date().getTime();
		lasthead = playhead;
		tmr = setInterval(timeupdate,42);
	}).catch(function (e) {
		console.error(e);
		alert('Failed to load comment file!');
	});
}
function stop(){
	cm.stop();
	if(cm.scripting){
		cm.scripting.send("Update:TimeUpdate",{
			"state":"pause",
			"time":playhead
		});
	}
	clearTimeout(tmr);
}
function resume(){
	cm.start();
	start = new Date().getTime() - playhead;
	lasthead = playhead;
	tmr = setInterval(timeupdate,42);
}
function cmresize() {
    if (cm.large) {
        cm.large = false;
        $('player').style.height = '384px';
        $('player-unit').style.width = '540px';
        cm.setBounds();
        cm.scripting.send("Update:DimensionUpdate", cm.scripting.getContext().getDimensions());
    } else {
        cm.large = true;
        $('player').style.height = '438px';
        $('player-unit').style.width = '672px';
        cm.setBounds();
        cm.scripting.send("Update:DimensionUpdate", cm.scripting.getContext().getDimensions());
    }
}
</script>
</body>
</html>
